@charset "utf-8";

@import url('https://fonts.googleapis.com/css?family=Fira+Sans:400,500,700|Fira+Mono:400,500,700|Fira+Code:400,500,700|Work+Sans:400,500,700');

@import "~bulma/sass/utilities/_all";

$family-sans-serif: "Work Sans", sans-serif;
$family-primary: $family-sans-serif;
$family-secondary: "Fira Sans", sans-serif;
$family-monospace: "Fira Mono", monospace;
$family-code: "Fira Code", monospace;

$box-radius: $radius-small;
$notification-radius: $radius-small;
$tag-radius: $radius-small;

$navbar-item-img-max-height: 3rem;

$desktop: 1012px + (2 * $gap);

$widescreen-enabled: false;
$fullhd-enabled: false;

@import "~bulma/sass/base/_all";
@import "~bulma/sass/elements/_all";
@import "~bulma/sass/components/_all";
@import "~bulma/sass/form/_all";
@import "~bulma/sass/grid/_all";
@import "~bulma/sass/layout/_all";
@import "~bulma/sass/helpers/_all";

$divider-background-color: $white-ter;
$divider-thickness: $hr-height;

@import "~bulma-divider/src/sass/index";
@import "~bulma-tooltip/src/sass/index";
@import "~bulma-timeline/src/sass/index";
@import "~bulma-badge/src/sass/index";

$fa-font-path: "@fortawesome/fontawesome-free/webfonts";
//$fa-font-path: "~@fortawesome/fontawesome-pro/webfonts";

@import "~@fortawesome/fontawesome-free/scss/fontawesome";
@import "~@fortawesome/fontawesome-free/scss/brands";
@import "~@fortawesome/fontawesome-free/scss/solid";
//@import "~@fortawesome/fontawesome-pro/scss/fontawesome";
//@import "~@fortawesome/fontawesome-pro/scss/brands";
//@import "~@fortawesome/fontawesome-pro/scss/solid";

@import "components/_all";

main.container {
  padding: 2rem 0;
}

nav.navbar {
  .global-search {
    input {
      width: 18rem;
      border: 0;
      box-shadow: none;
      background-color: $white-ter;

      &::placeholder {
        font-weight: $weight-semibold;
      }
    }

    .dropdown {
      .dropdown-menu {
        width: 18rem;
        .dropdown-item:hover {
          background-color: $light;
        }
        .dropdown-item.is-selected {
          background-color: $light;
        }
      }
    }
  }
}

pre code.hljs {
  padding: 0;
  background-color: transparent;
}

table.table {
  &.has-outer-border {
    border: 1px solid $grey-lighter;
  }

  tr td.is-vcentered {
    vertical-align: middle;
  }

  td.is-fullwidth {
    width: 100%;
  }
}

.commit-oid::before {
  font-weight: normal;
}

.blob-edit {
  margin-bottom: 1.5rem;
  .tabs.is-boxed {
    overflow: inherit;
    margin-bottom: 0;

    ul {
      line-height: 31px;
      background-color: $white-ter;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;

      li {
        border-top-right-radius: 0;
        border-top-right-radius: 0;
        &.is-active {
          &:first-child {
            a {
              border-color: $white;
              border-top-right-radius: 0;
              border-right-color: $grey-lighter;
            }
          }
          a {
            background-color: $white;

          }
        }
      }
    }
  }

  textarea.textarea {
    @extend .is-white;
    box-shadow: none;
    padding-top: 13px;
    padding-left: 59px;
  }
}

textarea.textarea {
  padding: 0.33rem 0.56rem;

  &.code {
    font-size: 0.875em;
    font-family: $family-monospace;
    -webkit-font-smoothing: initial;
  }
}

.rta {
  position: relative;

  .rta__loader {
    display: none;
  }

  .rta__autocomplete {
    margin-top: 1.5em;
    position: absolute;
    z-index: 99;

    &.rta__autocomplete--top {
      margin-top: 0;
      margin-bottom: 1.5em;
    }

    .rta__list {
      .rta__item {
        .dropdown-item {
          font-size: 1rem;
        }
        &.rta__item--selected  {
          .dropdown-item {
            background-color: $white-ter;
          }
        }
      }
    }
  }
}

.hero {
  .hero-body {
    padding: 3rem 0;
    .hero-banner {
      position: absolute;
    }
  }
}

.breadcrumb {
  margin-right: .75rem;
  display: inline-flex;
  .icon {
    padding-bottom: 0.5rem;

    &:first-child {
      margin-right: 0.5rem;
    }
  }
}

.commit-parents {
  float: right;
  margin-right: -0.74rem;

  .control {
    label {
      font-weight: 400;
    }

    .buttons .button.is-small {
      margin-top: -0.2rem;
    }
  }
}

.commit-timeline {
  margin-bottom: 1.5rem;

  .timeline-header {
    width: 100%;
  }

  .timeline-item {
    padding-bottom: 0;

    &:hover {
      .timeline-marker {
        background-color: $link;
        border-color: $link;
      }
    }
    &.is-spacer {
      height: 0.8em;
    }

    .timeline-content {
      width: 100%;
      padding-top: 0.8em;
    }
  }
}

.title, .subtitle {
  font-family: $family-secondary;
}

.is-sticky {
  top: 1rem;
  position: sticky;
}

.avatar {
  margin: 0 2px;
  border-radius: 50%;
  vertical-align: text-bottom;

  &.is-small {
    border-radius: 2px;
  }
}

.avatar-stack {
  display: inline-flex;
  flex-direction: row-reverse;
  margin-right: -5px;
  padding-left: 15px;

  a {
    position: relative;
    margin-left: -15px;
    transition: margin-left .2s;
  }

  &:hover {
    a:not(:last-child) {
      margin-left: 0;
    }
  }
}

@keyframes slideDown {
    0%, 100% { transform: translateY(-110px); }
    5%, 95% { transform: translateY(0px); }
}

.box {
  .box-header {
    @extend .card-header;

    .box-header-title {
      @extend .card-header-title;
    }

    .box-header-icon {
      @extend .card-header-icon;
    }
  }

  .box-content {
    @extend .card-content;
  }

}

.box.signed-commit {
  width: 15rem;

  .box-header {
    .box-header-title {
      display: inline-block;
      font-weight: 400;

      strong {
        font-weight: 600;
      }
    }
  }
  .box-content {
    .committer {
      strong {
        font-weight: 700;
        font-family: $family-secondary;
      }
      a {
        color: $dark;
      }

      margin-bottom: .2rem;
      padding-bottom: .2rem;

      figure {
        padding-right: .4rem;
      }
    }

    span.gpg-key-id {
      color: $grey;
    }

    hr {
      margin: .4rem 0;
      height: .1rem;
    }
  }
}

.tooltip {
  line-height: 24px;
}

.message.is-fixed {
  position: fixed;
  right: 1.5rem;
  top: 1.5rem;
  z-index: 99;
  min-width: 20rem;
  transform: translateY(-110px);
  animation-name: slideDown;
  animation-duration: 4s;
  animation-iteration-count: 1;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}

.button {
  &.github {
    color: $white-bis;
    border-color: transparent;
    background-color: #4078c0;
  }

  &.github-alt {
    color: #4078c0;
  }

  &.gitlab {
    color: $white-bis;
    border-color: transparent;
    background-color: #fca326;
  }

  &.gitlab-alt {
    color: #fca326;
  }

  &.gitee {
    color: $white-bis;
    border-color: transparent;
    background-color: #D90000;
  }

  &.gitee-alt {
    color: #D90000;
  }
}

.user-profile {
  ul {
    li {
      font-size: 0.875em;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }
  }
}

.tag.is-small {
  height: 1.7em;
  padding-left: 0.6em;
  padding-right: 0.6em;
}

.tag.user {
  padding-left: 0;
  vertical-align: middle;
  color: $black;

  a {
    color: $black;
  }

  &.is-white {
    .avatar-stack {
      a {
        background-color: $white-ter;
      }
    }
  }

  &.is-small {
    vertical-align: middle;
    height: 1.2rem;
    margin-top: -0.2rem;

    img.avatar {
      width: 1.2rem;
      height: 1.2rem;
    }
  }

  .avatar-stack {
    height: 24px;
    margin-right: 2px;

    a {
      background-color: $white;
      padding-right: 2px;

      &:first-child {
        z-index: 9999;
        background-color: transparent;
        img.avatar {
          margin-left: 0;
          margin-right: 0;
          border-top-right-radius: 0;
          border-bottom-right-radius: 0;
        }
      }
    }
  }

  > img.avatar {
    margin-left: 0;
    margin-right: 0.25rem;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
}

.tag.placeholder {
  width: 100%;
  min-width: 120px;
}

.a-b-count-default {
  width: 180px;
  text-align: center;
}

.a-b-count {
  .count-half {
    position: relative;
    float: left;
    text-align: right;
    width: 90px;
    padding-bottom: 6px;
    &:last-child {
      text-align: left;
      border-left: 1px solid $grey;
    }

    .count-value {
      position: relative;
      top: -1px;
      display: block;
      padding: 0 8px;
      font-size: $size-7;
    }

    .count-bar {
      position: absolute;
      min-width: 3px;
      height: 4px;
      background-color: $grey-lighter;

      &.count-bar-behind {
        right: 0;
      }
    }
  }
}

.branch-select {
  .dropdown {
    .dropdown-menu {
      .panel {
        background-color: $dropdown-content-background-color;
      }
      .panel-block {
        font-size: 0.875em;

        .control .head {
          font-size: 0.875em;
        }

        &.is-active {
          border-left-color: #3273dc;
          border-left-style: solid;
        }

        &:last-child {
          border-bottom-left-radius: $radius;
          border-bottom-right-radius: $radius;
        }
      }
    }
  }
}

.issue-label {
  @extend .is-small;
  font-weight: bold;
  margin-top: -2px;

  &.is-active {
    border-color: $white;
  }
}

.issue-label-select, .issue-label-dropdown {
  .menu-label button {
    margin-top: -4px;
  }

  .issue-label {
    width: 100%;
    justify-content: flex-start;

    &.edit:not(.is-active) {
      background-color: $white !important;
      color: $dark !important;
      border-color: $grey-lighter;

      span.icon {
        display: none;
      }
    }

    span.icon {
      flex-grow: 1;
      justify-content: flex-end;
      padding-right: 0.25rem;
    }

    &:not(:last-child) {
      margin-bottom: 0.5rem;
    }
  }
}

.issue-label-select {
  .issue-label {
    &.edit.is-active {
      flex-direction: row-reverse;
    }
  }
}


.clone-repo {
  .http-clone, .ssh-clone {
    width: 20em;
    input {
      font-size: 0.875em;
      height: 2.5rem;
    }
  }
  .button.http-clone-button, .button.ssh-clone-button {
    @extend .is-light;
    border-color: $grey-lighter;
    &:hover {
      border-color: $grey-lighter;
      &.is-active {
        border-color: $link;
      }
    }
    &.is-active {
      @extend .is-link;
      border-color: $link;
    }
  }
}

.issue {
  .issue-title {
    @extend .title;
    height: 40px;
  }
}
.issues-table {
  .issue-title {
    display: inline-flex;
    flex-wrap: wrap;
    &>:not(last-child) {
      margin-right: .33rem;
    }

    .issue-labels {
      .issue-label {
        margin-left: 0.33rem;
      }
    }
  }
}

.user-input {
  .dropdown {
    display: block;
    .input.field {
      .control:not(:last-child) {
        margin-right: 0;
      }
      .tag {
        padding-left: 1px;
        padding-right: 0;
      }
    }
    .dropdown-menu {
      width: 100%;
    }
  }
}

.commit-stats {
  p {
    .is-family-monospace {
      font-size: .9em;
    }
  }
}

.card.commit, .card.blob {
  .card-header.ellipsis {
    .card-header-title {
      overflow-x: hidden;
      display: inline;
      line-height: 28px;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}

.card.commit {
  .card-header.ellipsis {
    .card-header-icon {
      min-width: 422px;
    }
  }
}

.card.blob {
  .card-header.ellipsis {
    .card-header-icon {
      white-space: nowrap;
    }
  }
}

.card.blob, .card.diff {
  .card-content {
    overflow-x: scroll;
  }
}

.card.blob {
  .card-header {
    background-color: $white-ter;
    border-bottom: 1px solid $grey-lighter;
    box-shadow: none;

    .card-header-title {
      font-weight: 400;
    }
  }

  .card-content {
    padding: 0.5rem 0;
  }
}

.card.diff {
  .card-header {
    border-bottom: 1px solid $grey-lighter;
    .card-header-title {
      padding-left: .24em;
    }
  }

  .card-content {
    padding: 0;
  }
}

.loading-ellipsis:after {
  overflow: hidden;
  margin-left: .1em;
  display: inline-block;
  vertical-align: bottom;
  animation: ellipsis steps(4,end) 1.5s infinite;
  content: "\2026";
  width: 0px;
}

@keyframes ellipsis {
  to {
    width: 1.25em;
  }
}

.log-message {
  margin-top: 2rem;

  pre {
    padding: 0;
    background-color: $white;
  }
}

.comment-form {
  margin-bottom: 1.25rem;
  header {
    margin-top: -1.25rem;
    margin-left: -1.25rem;
    margin-right: -1.25rem;
    padding-top: 1.25rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;

    ul {
      margin-left: -1.25rem;
      margin-right: -1.25rem;
      padding-left: 1.25rem;
      padding-right: 1.25rem;

      li.is-active a {
        color: $black;
      }
    }
  }

  .comment-preview {
    min-height: 128px;
    border-bottom: 1px solid $grey-lighter;
    margin-left: -1.25rem;
    margin-right: -1.25rem;
    padding: 0 1.25rem 1.25rem;
  }
}

.thread, .inline-comments {
  .comment, .comment-form, .comment-placeholder {
    @extend .box;
    max-width: 753px;

    &:not(:first-child) {
      margin: 1rem 0;
    }
  }

  .comment {
    header {
      margin-bottom: .8rem;
    }
  }
}

.inline-comments {
  > header {
    margin: 0 1rem;
  }

  .comment, .comment-form {
    margin: 1rem;
  }
}

.thread .timeline, .inline-comments .timeline {
  .timeline-header {
    width: 100%;
    margin-top: 1rem;
  }

  .timeline-item {
    padding-top: 0.2rem;
    padding-bottom: 0;

    .timeline-content {
      width: 100%;

      .comment, .comment-form, .comment-placeholder {
        position: relative;
        margin: 0 0 0 -4rem;
      }
    }
  }
}

.inline-comments .timeline {
  padding: 0 1rem 0;
  &:last-child {
    padding-bottom: 1rem;
  }
}

table.branches-table, table.tags-table {
  tr td {
    width: 100%;

    &:first-child {
      width: auto;
    }
  }
}

table.tree-table {
  border-radius: 0.25rem;
  box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1), 0 0px 0 1px rgba(10, 10, 10, 0.02);

  thead {
    box-shadow: none;
    td {
      height: 48px;
      vertical-align: middle;
      border-width: 0 0 1px;
      background-color: $light;

      &:first-child {
        border-top-left-radius: 0.25rem;
      }

      &:last-child {
        border-top-right-radius: 0.25rem;
      }

      .tag.placeholder {
        vertical-align: middle;
      }
    }
  }

  tbody {
    tr {
      td {
        &:first-child, &:last-child {
          white-space: nowrap;
        }

        .tag.placeholder {
          display: flex;
        }
      }
    }
  }
}

table.blob-table, table.commit-table {
  border-collapse: separate;
  width: 100%;

  tbody {
    tr {
      &:first-child {
        td {
          padding-top: .35rem;
        }
      }

      &:last-child {
        td {
          padding-bottom: .35rem;
        }
      }

      td {
        border: none;
        padding: 0;

        &.line-no {
          font-size: 0.875em;
          font-family: $family-monospace;
          -moz-osx-font-smoothing: auto;
          -webkit-font-smoothing: auto;
          width: 1%;
          min-width: 50px;
          padding-left: 10px;
          padding-right: 10px;
          text-align: right;
          vertical-align: top;
          white-space: nowrap;
          color: rgba(27,31,35,.3);
        }

        &.code {
          font-size: 0.875em;
          font-family: $family-monospace;
          -moz-osx-font-smoothing: auto;
          -webkit-font-smoothing: auto;
          padding-left: 10px;
          padding-right: 10px;
          vertical-align: top;

          .code-inner {
            overflow: visible;
            white-space: pre;
            word-wrap: normal;

            &.hljs {
              padding: 0;
              background-color: transparent;
            }
          }
        }
      }
    }
  }
}

table.commit-table {
  margin-top: 0;

  tbody {
    tr {
      &.hunk {
        td {
          &.line-no {
            vertical-align: middle;
            background-color: $white-ter;
          }

          &.code {
            color: rgba(27,31,35,.7);
            background-color: $white-bis;
            border-width: 1px 0;
            padding-bottom: 4px;
            padding-top: 4px;
          }

        }
      }

      &.inline-comments {
        td {
          border-top: 1px solid $grey-lighter;
          border-bottom: 1px solid $grey-lighter;
          background-color: $white-bis;
        }
      }

      &.diff-addition {
        td {
          background-color: #cdffd8;
          border-color: #bef5cb;

          &.code {
            background-color: #e6ffed;
          }
        }
      }

      &.diff-deletion {
        td {
          background-color: #ffdce0;
          border-color: #fdaeb7;

          &.code {
            background-color: #ffeef0;
          }
        }
      }

      &:hover {
        td.code.origin button {
          opacity: 1;
          display: block;
        }

      }

      td {
        &.code {
          &.origin {
            position: relative;
            width: 1em;

            button {
              position: absolute;
              margin: -3px 0 0 -24px;
              float: left;
              border-radius: 50%;
              opacity: 0;
              display: none;
              transform: scale(.7);
              transition: transform .1s ease-in-out;
              z-index: 5;

              &:hover {
                transform: scale(1);
              }

              .icon i {
                margin-top: 2px;
              }
            }
          }
        }
      }
    }
  }
}

table.commit-stats-table {
  margin-top: -1.5rem;
}

table.commits-table {
  width: 100%;
  table-layout: fixed;
  tbody {
    tr {
      td + td {
        width: 10rem;
      }
    }
  }
}

table.issues-table {
  thead tr td.selection {
    line-height: 2.5;
  }
  tr {
    td.selection {
      width: 0.75rem;
      text-align: center;
    }
    td.status {
      width: 0.75rem;
      text-align: center;
    }
  }
}

table.issue-label-table {
  tbody tr td {
    vertical-align: middle;
    .color-picker {
      .pickr {
        width: 70px;
        height: 2.5rem;
        font-size: .8em;
        font-weight: 500;
        border-width: 0;
      }
    }
  }
}
